<!--
 * @Author: lixb
 * @Date: 2020-08-24 09:39:18
 * @LastEditTime: 2020-09-23 17:50:22
 * @Descripttion: 查看员工信息
-->
<template>
  <div>
    <el-drawer
      title="查看详情"
      :visible.sync="isOpenDetail"
      :direction="direction"
      size="50%"
      :before-close="beforeClose"
    >
      <div class="detail-wrap">
        <div class="staff-name">{{ staffDetail.realName }}</div>
        <div class="staff-info">
          <span>（ID：{{ staffDetail.id }}）</span>
          <span>
            【{{
              staffDetail.useStatus == 0 ? '在职' : staffDetail.useStatus == 1 ? '离职' : '注销'
            }}】
          </span>
          <span class="el-icon-mobile-phone">{{ staffDetail.mobilePhone }}</span>
          <p style="color: #7F848B;">
            {{ staffDetail.sex == 0 ? '女' : staffDetail.sex == 1 ? '男' : '未知' }} |
            {{
              staffDetail.birthday && staffDetail.birthday.length != 0
                ? new Date().getFullYear() - staffDetail.birthday.substring(0, 4) + '岁'
                : '未知'
            }}
          </p>
        </div>
        <el-divider></el-divider>
        <el-form ref="ruleForm" :inline="true" :model="staffDetail" status-icon label-width="100px">
          <el-form-item label="工号：">
            <span>{{ staffDetail.jobNumber }}</span>
          </el-form-item>
          <el-form-item label="部门：">
            <span>{{ staffDetail.deptName }}</span>
          </el-form-item>
          <el-form-item label="岗位：">
            <span>{{ staffDetail.position }}</span>
          </el-form-item>
          <el-form-item label="出生日期：">
            <span>{{ staffDetail.birthday }}</span>
          </el-form-item>
          <el-form-item label="入职日期：">
            <span>{{ staffDetail.entryTime }}</span>
          </el-form-item>
        </el-form>
        <p style="font-weight: bold;">|&nbsp;{{ welfareName }}</p>
        <span class="blance">
          可用余额：
          <span>￥{{ staffInfo.amout }}</span>
        </span>
        <el-divider></el-divider>
        <Table
          :table-data="tableData"
          :prop-data="propData"
          border
          :layout="layout"
          :paging-data="pagingData"
          :table-height="tableHeight"
          @getTableList="getTableList"
        >
          <template slot="amount">
            <el-table-column label="金额明细">
              <template slot-scope="scope">
                <span>
                  {{
                    scope.row.state == 0 || scope.row.state == 5
                      ? '-' + scope.row.amount
                      : scope.row.state == 1
                      ? '+' + scope.row.amount
                      : scope.row.state == 2
                      ? '+' + scope.row.amount
                      : '-'
                  }}
                </span>
              </template>
            </el-table-column>
          </template>
          <template slot="state">
            <el-table-column label="增减类型">
              <template slot-scope="scope">
                <span>
                  {{
                    scope.row.state == 0 || scope.row.state == 5
                      ? '扣款'
                      : scope.row.state == 1
                      ? '退款'
                      : scope.row.state == 2
                      ? '发放'
                      : '-'
                  }}
                </span>
              </template>
            </el-table-column>
          </template>
          <template slot="orderType">
            <el-table-column label="类型">
              <template slot-scope="scope">
                <span>
                  {{ scope.row.state == 0 ? '支出' : '系统' }}
                </span>
              </template>
            </el-table-column>
          </template>
        </Table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { getLocalData } from '@/utils/localStore';
  import Table from '@/components/Table.vue';
  import { getStaff, getCardList } from '@/api/staff';
  import { mapGetters } from 'vuex';
  export default {
    components: { Table },
    props: {
      staffInfo: {
        type: Object,
        required: true,
      },
      isOpenDetail: {
        type: Boolean,
        required: true,
      },
    },
    data() {
      return {
        tableHeight: '450px',
        staffDetail: {},
        direction: 'rtl',
        tableData: [],
        layout: 'sizes, prev, pager, next',
        propData: [
          {
            prop: 'createTime',
            label: '操作时间',
          },
          {
            prop: 'orderType',
            label: '类型',
            type: 'orderType',
          },
          {
            prop: 'state',
            label: '增减类型',
            type: 'state',
          },
          {
            prop: 'amount',
            label: '金额明细',
            type: 'amount',
          },
          {
            prop: 'surplusAmount',
            label: '当期可用额度',
          },
          {
            prop: 'orderNo',
            label: '订单号',
          },
          {
            prop: 'themeName',
            label: '发放主题',
          },
        ],
        pagingData: {
          size: 10,
          current: 1,
          total: 50,
        },
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      welfareName() {
        return getLocalData('welfareName');
      },
    },
    watch: {
      staffInfo(newData) {
        console.log(newData);
        if (newData) {
          this.getStaffInfo();
        }
      },
    },
    activated() {},
    methods: {
      getStaffInfo() {
        let params = {
          organizationId: this.userInfo.organId,
          staffId: this.staffInfo.id,
        };
        getStaff(params).then(res => {
          this.staffDetail = res.data || {};
          this.getTableList(this.pagingData);
        });
      },
      getTableList(val) {
        let params = {
          organizationId: this.userInfo.organId,
          pageCurrrent: val.current,
          pageSize: val.size,
          userId: this.staffInfo.userId,
        };
        getCardList(params).then(res => {
          this.tableData = res.data.records;
          this.pagingData.total = res.data.total;
        });
      },
      beforeClose() {
        this.$emit('closeDrawer', false);
      },
    },
  };
</script>

<style lang="scss" scoped>
  /deep/ .el-drawer__body {
    padding-left: 20px;
  }
  .detail-wrap {
    .el-form--inline .el-form-item {
      white-space: nowrap;
    }
    .staff-name {
      width: 66px;
      height: 66px;
      border-radius: 5px;
      background: #f2f2f4;
      line-height: 66px;
      text-align: center;
      display: inline-block;
      white-space: nowrap;
    }
    .staff-info {
      display: inline;
      height: 66px;
    }
    .blance {
      font-size: 12px;
      span {
        color: #ff3b30;
      }
    }
  }
</style>
